<template>
    <view class="c-fixed-menu" :style="{ height: height_ }">
        <view :class="[ 
			`c-${position}-menu__fixed`,
			value ? 'c-fixed-menu--active' : '',
			hasBorder_ ? (position === 'top' ? ' c-underline' : ' c-underline__top') : ''
		]" :style="[
            parentStyle_
        ]">
            <view class="c-fixed-menu__content" :style="[ style_ ]">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            // 浮动方向,值为top或者bottom
            position: {
                type: String,
                default: 'top'
            },
            // 清楚浮动的高度,支持rpx px,不写单位默认为rpx
            height: {
                type: [ String, Number ],
                default: 88
            },
            fixedHeight: {
                type: [ String, Number ],
                default: 'inherit'
            },
            value: {
                type: Boolean,
                default: true
            },
            bgColor: {
                type: String,
                default: '#fff'
            },
            menuStyle: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            border: {
                type: [ Boolean, String ],
                default: false
            },
            hasTab: {
                type: [ Boolean, String ],
                default: false
            }
        },
        computed: {
            hasBorder_() {
                return String(this.border) === 'false' ? false : true;
            },
            hasTab_() {
                return String(this.hasTab) === 'false' ? false : true;
            },
            fixedHeight_() {
                return this.getPX(this.fixedHeight === 'auto' ? 'auto' : this.height, this.height);
            },
            height_() {
                if(!this.value) return 0;
                return this.getPX(this.height, 0);
            },
            parentStyle_() {
                return {
                    backgroundColor: this.bgColor
                }
            },
            style_() {
                let style_ = {
                    height: this.fixedHeight_,
                    ...this.parentStyle_,
                    ...this.menuStyle
                };
                this.hasTab_ && (style_.transform = `translateY(${this.hasTab_ ? '-50px': 0})`);
                return style_
            }
        },
        methods: {
            getPX(val, deault = 0) {
                return !val ? deault : !isNaN(val)  ? (val + 'rpx') : val;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .c-top-menu__fixed, .c-bottom-menu__fixed{
        transform: translateY(-120%);
        background-color: #fff;
        @include fixed(var(--window-top), 0, none, 0);
        /* #ifdef H5 */
        @include iosSafeArea(top, 44px, top);
        /* #endif */
        /* #ifndef H5 */
        @include iosSafeArea(top, 0px, top);
        /* #endif */
        margin: 0 auto;
        z-index: 10;
        opacity: 0;
        @include tst();
        // /deep/ button{
        //     width: 160rpx;
        //     height: 72rpx;
        //     border-radius: 8rpx;
        //     font-size: 28rpx;
        //     &::after{
        //         border-radius: 16rpx;
        //     }
        //     &.full-width{
        //         border-radius: 16rpx;
        //         font-size: 32rpx;
        //         height: 88rpx;
        //         &::after{
        //             border-radius: 32rpx;
        //         }
        //     }
        // }
    }
    .c-fixed-menu__content{
        @include flex(column);
    }
    .c-bottom-menu__fixed{
        transform: translateY(120%);
        @include fixed(auto, 0, 0, 0);
        @include iosSafeArea(padding, 0px, bottom, bottom);
        .c-fixed-menu__content{
            // padding: 16rpx 24rpx;
            // justify-content: center;
        }
    }
	
    .c-fixed-menu{
        box-sizing: content-box;
        @include iosSafeArea(padding, 0px, bottom, bottom);
		&--active{
            opacity: 1;
			transform: translateY(0);
		}
    }
</style>
